<script setup lang="ts">
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
//登录接口
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const isLoggedIn = computed(() => {
  return userStore.authToken && userInfo.value && userInfo.value.username;
});

const login = async () => {
  if (ruleForm.phone)
    userStore.login({ username: ruleForm.phone, password: "" });
  else ElMessage.error("请输入任意用户名！");
};

const { enter } = useMagicKeys();
watch(enter, (v) => {
  if (v) login();
});

const logout = async () => {
  userStore.logOut();
};
// 菜单
const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 登录注册主键相关
const com = reactive({
  title: '',
  dialogW: "320px",
  labelW: '68px',
  tabPosition: 'top',
  activeName: ref('login'),
  dialogVisible: ref(false),
});
const openDialog = (name: any) => {
  com.activeName = name
  com.dialogVisible = true
}
const closeDialog = () => {
  com.dialogVisible = false
}
interface RuleForm {
  phone: "",
  code: ""
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  phone: "",
  code: "",
});
const rules = reactive<FormRules<RuleForm>>({
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ]
});
const getCode = () => {
  // TODO: 发送短信验证码的逻辑，可以将手机号发送到后端接口进行处理。  
};
const submitForm = (formEl: FormInstance | undefined) => {
  //开启验证
  // if (!formEl) return
  // await formEl.validate((valid, fields) => {

  // })
  login();
  closeDialog()
}

const configStore = useConfigStore()
const { config } = storeToRefs(configStore)
</script>

<template>
  <!-- 主容器 -->
  <div class="common-layout">
    <el-container>
      <!-- header -->
      <el-affix>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
          @select="handleSelect">
          <div class="flex-grow" />
          <el-menu-item index="0">
            <img style="width: 50px" src="/Vue.png" alt="Element logo" /><el-text class="c-black" tag="b">{{ config.title
            }}</el-text>
          </el-menu-item>
          <el-menu-item index="1">首页</el-menu-item>
          <div class="flex-grow" />
          <div class="flex-grow" />
          <el-sub-menu index="2">
            <template #title>产品及定价</template>
            <el-menu-item index="2-1">国内</el-menu-item>
            <el-menu-item index="2-1">国际</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="3">
            <el-link :underline="false" href="https://gitee.com/FnTop/fn-sms" target="_blank">文档</el-link>
          </el-menu-item>
          <el-menu-item v-if="!isLoggedIn">
            <el-link :underline="false" @click="openDialog('login')">登录</el-link>
          </el-menu-item>
          <el-menu-item v-if="!isLoggedIn">
            <el-link :underline="false" @click="openDialog('register')">免费试用</el-link>
          </el-menu-item>
          <el-menu-item v-if="isLoggedIn">
            <el-link :underline="false" @click="navigateTo('/admin')">控制台</el-link>
          </el-menu-item>
          <el-menu-item v-if="isLoggedIn">
            <el-space spacer="|">
              <el-text>用户：{{ userInfo.username }}</el-text>
              <el-link :underline="false" @click="logout()">退出</el-link>
            </el-space>
          </el-menu-item>

          <div class="flex-grow" />
          <el-menu-item>
            <admin-dark-toggle />
          </el-menu-item>
        </el-menu>
      </el-affix>
      <!-- body -->
      <el-main>
        <el-row>
          <el-col :span="18" :offset="3">

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18" :offset="3">
            <el-divider />
          </el-col>
        </el-row>
      </el-main>
      <!-- foot -->
      <el-footer>
        <el-row>
          <el-col :span="18" :offset="3">
            Copyright © 2023-2024 LLSMS. All rights reserved. Part of the Apistd Family.
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
  <!-- backtop -->
  <el-backtop :bottom="100">
    <div style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      ">
      回到顶部
    </div>
  </el-backtop>

  <!-- 登录注册 -->
  <el-dialog v-model="com.dialogVisible" :width="com.dialogW" v-bind:title="com.title">
    <el-tabs :tab-position="com.tabPosition" v-model="com.activeName" stretch>
      <el-tab-pane label="登录" name="login">
        <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" :label-width="com.labelW">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="ruleForm.code" placeholder="验证码">
              <template #append>
                <el-button type="primary" @click="getCode">获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="免费试用" name="register">
        <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" :label-width="com.labelW">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="ruleForm.code" placeholder="验证码">
              <template #append>
                <el-button type="success" @click="getCode">获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 免费试用</el-button>
          </el-form-item>
          <div>
          </div>
        </el-form>
      </el-tab-pane>

    </el-tabs>
  </el-dialog>
</template>
<style>
.flex-grow {
  flex-grow: 1;
}
</style>
